<!--
 * @Author: your name
 * @Date: 2021-04-14 14:45:26
 * @LastEditTime: 2021-07-27 09:25:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\owns\Table.vue
-->

<template>
  <a-table class="table" style="background:#fff;" :columns="columns" :data-source="dataSource" :row-selection="rowSelection" rowKey="userId" :pagination="{
            current: page,
            pageSize: pageSize,
            total: total,
            showLessItems: true,
            onChange: onPageChange,
            onShowSizeChange: onSizeChange,
        }">
    <template v-for="colCustom in columnsCustom" :slot="colCustom.customRender" slot-scope="text, record">
      <slot :name="colCustom.customRender" v-bind="record"></slot>
    </template>
  </a-table>
</template>

<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      required: true,
    },
    dataSource: {
      type: Array,
      required: true,
    },
    page: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
    selectedRowKeys: Array,
  },
  data () {
    return {};
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.$emit('selectedKeys', { selectedRowKeys, selectedRows });
        },
      };
    },
    columnsCustom () {
      return this.columns
        .filter(item => {
          return item.scopedSlots;
        })
        .map(item => item.scopedSlots);
    },
  },
  methods: {
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.$emit('pageChange', { page, pageSize });
    },
    onSizeChange (current, size) {
      this.$emit('sizeChange', { current, pageSize: size });
    },
  },
};
</script>

<style></style>
